<template>
  <div>
    <p>标题：{{ title }}</p>
    <p>索引：{{ index }}</p>
    <p>用户id: {{ uid }}</p>
    <p>用户名：{{ userName }}</p>
    <!-- <span>{{hh}}</span> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, defineExpose } from 'vue'
// 2个 data-v-xxx 是父子组件各自的 css scoped 标记
export default defineComponent({
  inheritAttrs: false, //为了屏蔽自定义属性的渲染
  props: {
    title: {
      type: String,
      require: true,
      default: `默认标题`

    },

    index: Number,

    userName: {
      type: String,
      validator(v: string) {
        return v.length >= 3
      }
    },

    uid: [Number, String]
  },
  // 普通用法
  // emits: [
  //   'update-age'
  // ]
  // 对象用法，要做一些校验
  // emits: {
  //   'update-age': (age: number) => {
  //     if (age < 18) {
  //       console.log(`未成年人不允许参与`);

  //       return false
  //     }

  //     return true
  //   },

  //   'update-name': null
  // },
  // emits定义,v-model效果
  emits: [
    'update:userName',
    'update:uid',
  ],

  /**
   *   获取非 Prop 的 Attribute
   *   想要拿到这些属性，原生操作需要
   *   通过 element.getAttribute ，
   *   但 Vue 也提供了相关的 API ：
   *   在 Child.vue 里，
   *   可以通过 setup 的第二个参数
   *   context
   *   里的 attrs 来获取到这些属性。
   */

  setup(props, context) {//{ attrs }
    // setup() {

    console.log("props=child", props);

    // console.log("attrs==", attrs);
    console.log(`context:`, context);

    const { emit: emits } = context


    const { index, uid, userName, title } = props

    console.table({ index, uid, userName, title })

    // setTimeout(() => {
    //   emits('update-age', 22)
    // }, 2000)

    setTimeout(() => {
      emits('update:userName', 'Tom')



    }, 2000)

    setTimeout(() => {

      console.log("userName-up", userName);


    }, 4000)

    const getList = () => {
      console.log("getList***");

    }

    // defineExpose({
    //   getList
    // })


    return {
      getList
    }
  }
})
</script>

<style scoped>
a {
  color: purple
}
</style>
